Angular Wikipedia Search
HTML
<main ng-app="WikipediaSearch" ng-controller="SearchController as SearchCtrl">
<div class="container">
<form ng-submit="search()">
<div id="search" class="input-group">
<input type="text" class="form-control" placeholder="Search Wikipedia" ng-model=searchArticles>
<span class="input-addon"><a href ng-click="getRandom()">Random article</a></span>
</div>
</form>
<div id="results">
<ul class="article-list">
<a href="{{item.url}}" target="_blank" ng-repeat="item in results | filter:searchArticles">
<li class="article animated bounce">
<h5>{{ item.title }}</h5>
<p>{{ item.text }}</p>
</li>
</a>
</ul>
</div>
</div>
</main>
SCSS
$background: #eee;
$base-color: #eee;
$search-box: #F5D76E;
$search-box-hover: #F89406;
$article-color: #72C1AF;
body {
background-color: $background;
color: $base-color;
font-family: 'Roboto';
}
h5 {
margin-bottom: 20px;
font-size: 1.2em;
font-weight: 500;
}
#search {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 100ms ease;
}
#search.top {
top: 10%;
}
#search input {
width: 300px;
border: 2px solid $search-box;
border-radius: 20px;
background-color: #eee;
}
#search input:focus {
border: 2px solid $search-box-hover;
background-color: #fff;
}
#search input:focus + .input-addon {
border-color: $search-box-hover;
}
.input-addon {
position: absolute;
top: 20%;
right: 5%;
padding-left: 10px;
color: #bbb;
font-weight: 500;
border-left: 1px solid $search-box;
z-index: 10;
}
.input-addon a:hover {
color: #999;
}
.article-list {
margin: 150px auto;
}
.article {
width: 80%;
min-height: 75px;
margin: 10px auto;
padding: 20px;
background-color: $article-color;
border: 1px solid #ddd;
opacity: 1;
font-size: 1.1em;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
cursor: pointer;
transition: all 200ms ease;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
}
.article:hover {
transform: translateX(5px);
}
.article p {
margin-left: 15px;
}
a, a:link, a:visited, a:hover, a:active {
text-decoration:none;
color: inherit;
}
/* Bounce animation from animate.css by Daniel Eden: http://daneden.github.io/animate.css/ */
@keyframes bounce {
from, 60%, 75%, 90%, to {
animation-timing-function: ease;
}
from {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
.bounce {
animation: bounce .8s ease;
}
JAVASCRIPT
(function() {
/* API call variables */
var endpoint = 'https://en.wikipedia.org/w/api.php?',
baseParams = 'format=json&action=query&',
callback = '&callback=JSON_CALLBACK';
var app = new angular.module('WikipediaSearch', []);
app.controller("SearchController", function($scope, $http, $timeout) {
$scope.results = [];
var searchBox = $("#search");
$scope.search = function() {
/* Move the search box to the top when user executes a search */
if (!(searchBox.hasClass("top"))) {
searchBox.addClass("top");
}
/* Reset article list */
$scope.results = [];
/* Search parameters */
var params = baseParams + 'generator=search&prop=extracts|info&inprop=url&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=',
query = searchBox.children().val();
/* If the user executes an empty search, do not make the API call, and reposition the search box back to the center */
if (query === '') {
searchBox.removeClass("top");
} else {
$http.jsonp(endpoint + params + query + callback).success(function(data) {
$timeout(function() {
var results = data.query.pages;
angular.forEach(results, function(k, v) {
$scope.results.push({
title: k.title,
text: k.extract,
url: k.fullurl
});
});
});
});
}
};
$scope.getRandom = function() {
/* Move the search box to the top when user gets a random article */
if (!(searchBox.hasClass("top"))) {
searchBox.addClass("top");
}
/* Reset article list */
$scope.results = [];
/* Parameters to get a random article */
var params = baseParams + 'generator=random&prop=extracts|info&exchars=500&exlimit=max&explaintext=&inprop=url&grnnamespace=0';
$http.jsonp(endpoint + params + callback).success(function(data) {
$timeout(function() {
var results = data.query.pages;
angular.forEach(results, function(k, v) {
$scope.results.push({
title: k.title,
text: k.extract,
url: k.fullurl
});
});
});
});
};
});
})();
